<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style>
			body{
				background: #FFFFFF;
			}
			.mui-content{
				background: #FFFFFF;
			}
			#myImg{
				width:16px;
				height:16px;
				float: right;
				margin-top: 15px;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a, .mui-title{
				color:rgba(255,255,255,1);
			}
			.mui-content{
				width:100%;
				position:relative;
				float:left;
			}
			.subor_one{
				width:100%;
				position: relative;
				float: left;
				padding-top:26.5px;
				padding-left:13px;
				box-sizing:border-box;
			}
			#info{
				width:60%;
				position: relative;
				float: left;
				padding-top:26.5px;
				padding-left:13px;
				box-sizing:border-box;
				font-size: 13px;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				color: rgba(153,153,153,1);
			}
			.subor_one>img{
				width:22px;
				height:22px;
				position: relative;
				float: left;	
			}
			.subor_one>span:nth-child(2){
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(254,102,98,1);
				padding-left:8.5px;
				box-sizing:border-box;
			}
			.subor_one>span:nth-child(3){
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(254,102,98,1);
				padding-left:5px;
				box-sizing:border-box;
			}
			.subor_one>span:nth-child(4){
				font-size:12px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(254,102,98,1);
				padding-left:5px;
				box-sizing:border-box;
				float: right;
				padding-right: 15px;
			}
			.subor_two{
				width:calc(96% - 15px);
				position:relative;
				float: left;
				border-bottom:1px solid #d4d4d4;
				margin-left:15px;
				padding-top:15px;
				box-sizing:border-box;
				padding-bottom:20px;
			}
			.two_o{
				width:20%;
				position:relative;
				float:left;
			}
			.two_o>img{
				width:50px;
				height:50px;
				border-radius:50%;
			}
			.two_t{
				width:58%;
				position: relative;
				float: left;
				padding-top: 5px;
				box-sizing:border-box;
			}
			.two_t>span:nth-child(1){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.two_t>span:nth-child(2){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
				padding-left:5px;
				box-sizing:border-box;
			}
			.two_t>p{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
			.two_th{
				width:22%;
				position: relative;	
				float: left;
				margin-top: 7px;
				box-sizing:border-box;
			}
			.two_th>button{
				width:83.5px;
				height:35px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
				border-radius:35px;
				font-size:15px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(255,255,255,1);
				border: none;
			}
		</style>
	</head>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">我的下级会员</h1>
				<img src="../image/dee70f432e7c4c0b8dde25d006f4e24.png" alt="" id="myImg">
			</header>	
			<div class="mui-content">
				<div class="subor_one">
					<img src="../image/hehuo1.png" alt="">
					<span>我的下级:</span>
					<span class="renshu">8</span>
					<span class="shenyu">你的合伙人还有30天</span>
				</div>
				<div id="info"></div>
				<div id="shentis">
					<!-- <div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>陈雪</span>
							<span>13522646689</span>
							<p>还可开启15天会员</p>
						</div>
						<div class="two_th" id="btn">
							<button>续费</button>
						</div>
					</div>
					<div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>陈雪</span>
							<span>13522646689</span>
							<p>还可开启15天会员</p>
						</div>
						<div class="two_th" id="btn">
							<button>续费</button>
						</div>
					</div>
					<div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>陈雪</span>
							<span>13522646689</span>
							<p>还可开启15天会员</p>
						</div>
						<div class="two_th" id="btn">
							<button>续费</button>
						</div>
					</div>
					<div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>陈雪</span>
							<span>13522646689</span>
							<p>还可开启15天会员</p>
						</div>
						<div class="two_th" id="btn">
							<button>续费</button>
						</div>
					</div>
					<div class="subor_two">
						<div class="two_o">
							<img src="../image/touxiang.png" alt="">
						</div>
						<div class="two_t">
							<span>陈雪</span>
							<span>13522646689</span>
							<p>还可开启15天会员</p>
						</div>
						<div class="two_th" id="btn">
							<button>续费</button>
						</div>
					</div> -->
				</div>
				
			</div>
			
	<body>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			window.addEventListener('refresh', function(e) {
			        //执行刷新
			        // console.log("刷新父页面")
			        location.reload();
			    });
			
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				//添加下级
				$.post(url+'/juyou/hehuo/getchild',{token:user.token},function(res){
					if(res.code==200){
						var str = '';
						$(".renshu").text(res.data.data.length)
						$(".shenyu").text('你的合伙人还有'+res.data.number+'天')
						$.each(res.data.data,function(i,v){
							str+='<div class="subor_two">'+
						'<div class="two_o">'+
							'<img src="'+v.touxiang+'" alt="">'+
						'</div>'+
						'<div class="two_t">'+
							'<span>'+v.name+'</span>'+
							'<span>'+v.user+'</span>';
							if(v.huiyuan>0){
								str+='<p>用户还在会员期内</p>'+
								'</div>';
							}else{
								str+='<p>可续费</p>'+
								'</div>'+
								'<div class="two_th" id="btn">'+
									'<button data-user="'+v.id+'" >续费</button>'+
								'</div>';
							}
					str+='</div>';
						})
						$("#shentis").append(str);
						
						mui.init()
						
						
						//点击搜索图片
						document.getElementById("myImg").addEventListener("tap",function(){
							mui.openWindow({
								url:"seek.html",
								id:"seek.html",
							})
						})
						
						
						//点击续费
						mui('.two_th').on('tap','button',function(e){
							var userid = $(this).attr('data-user');
							
							e.detail.gesture.preventDefault();
							var btnArray = ['取消', '确定'];
							mui.prompt('请输入续费天数(一次)：', '30', '提示', btnArray, function(e) {
							 if (e.index == 1) {
								var str = e.value;
								if(str>30){
									mui.toast('最多可以续费30天');
									return
								}
								plus.nativeUI.showWaiting();
								$.post(url+'/juyou/hehuo/renew_member',{token:user.token,userid:userid,number:str},function(res){
									plus.nativeUI.closeWaiting();
									mui.toast(res.msg);
									if(res.code==200){
										setTimeout(function(){
											window.location.reload();
										},1500)
									}
								})
							 }
							})
						})
						
						
						// //选择天数
						// var info = document.getElementById("info");
						// document.getElementById("btn").addEventListener('tap', function(e) {
						// 	var userid = $(this).attr('data-user');
						// 	mui.alert(userid);
						// 	e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
						// 	var btnArray = ['取消', '确定'];
						// 	mui.prompt('请输入续费天数(一次)：', '30', '提示', btnArray, function(e) {
						// 	 if (e.index == 1) {
						// 		var str = e.value;
						// 		if(str>30){
						// 			mui.toast('最多可以续费30天');
						// 			return
						// 		}
						// 	 }
						// 	})
						// });
					}else{
						mui.toast(res.msg);
					}
				})
				
				
				
			})
			
		</script>
	</body>

</html>
